<template>
	<view class="content" :style="{background: `url(${imgPath}storage/home/home_bg.png)`}">
		<view class="box">
			<view class="orderstatus">
				<view class="item" @click="switchOrder('')">
					<view class="status-img">
						<u--image :showLoading="true" :src="imgPath + 'storage/home/order1.png'" width="40rpx"
							height="40rpx"></u--image>
					</view>
					<view class="status-text">全部订单</view>
				</view>
				<view class="item" @click="switchOrder(1)">
					<view class="status-img">
						<u--image :showLoading="true" :src="imgPath + 'storage/home/order2.png'" width="40rpx"
							height="40rpx"></u--image>
					</view>
					<view class="status-text">待支付</view>
				</view>
				<view class="item" @click="switchOrder(2)">
					<view class="status-img">
						<u--image :showLoading="true" :src="imgPath + 'storage/home/order3.png'" width="40rpx"
							height="40rpx"></u--image>
					</view>
					<view class="status-text">支付成功</view>
				</view>
				<view class="item" @click="switchOrder(3)">
					<view class="status-img">
						<u--image :showLoading="true" :src="imgPath + 'storage/home/order4.png'" width="40rpx"
							height="40rpx"></u--image>
					</view>
					<view class="status-text">已取消</view>
				</view>
			</view>

			<scroll-view class="orderslist" scroll-y @scrolltolower="getBlessingorderList">
				<view v-if="blessingorderList.length>0">
					<view class="ordersitem" v-for="item in blessingorderList">
						<view class="top" @click="goDetal(item.order_id)">
							<view class="left">
								<u--image :showLoading="true" :src="item.img" width="108rpx" height="212rpx"></u--image>
							</view>
							<view class="right">
								<view class="title">
									<text class="pary">寺庙商品</text>
									<text class="type">{{item.status==1?'待支付':item.status==2?'已支付':'已取消'}}</text>
								</view>
								<view class="lamp">
									<view class="lamps">
										{{item.lotus_lamp_str}}
									</view>
									<view class="num">
										共{{item.lotus_lamp_ids.split(',').length}}盏
									</view>
								</view>
								<view class="number">
									订单编号：{{item.order_no}}
								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="total">
								合计：¥{{item.price}}
							</view>
							<view class="btn">
								<view v-if="item.status==1" class="btn1">
									<view class="left" @click="cancelOrder(item.order_id)">
										取消订单
									</view>
									<view class="right" @click="payOrder(item.order_id)">
										去支付
									</view>
								</view>
								<view v-if="item.status==2" class="btn1">
									<!-- <view class="left" @click="delOrder(item.order_id)">
										删除记录
									</view> -->
									<view class="right" @click="buyAgain(item)">
										再次祈愿
									</view>
								</view>
								<view v-if="item.status==3" class="btn1">
									<!-- <view class="left" @click="delOrder(item.order_id)">
										删除记录
									</view> -->
									<view class="right" @click="buyAgain(item)">
										再次祈愿
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="nodata">
					<u--image :showLoading="true" :src="imgPath + 'storage/home/nodata.png'" width="300rpx"
						height="198rpx"></u--image>
					<text>暂无内容～</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		pay
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				imgPath: this.$store.state.user.baseURL,
				paging: {
					page: 1,
					limit: 10,
				},
				total: null,
				blessingorderList: [],
				status: ''
			}
		},
		onLoad() {
			this.getBlessingorderList()
		},
		methods: {
			goDetal(id) {
				uni.navigateTo({
					url: '/subpackageA/paryorders/paryorderdetail?id=' + id
				})
			},

			getBlessingorderList() {
				if (this.total == this.blessingorderList.length) return
				this.$api.blessingorderlist({
					...this.paging,
					status: this.status,
					order_type: 1
				}).then(res => {
					console.log(res);
					this.blessingorderList = [...this.blessingorderList, ...res.data.list]
					this.total = res.data.total
					this.paging.page++
				})
			},
			switchOrder(type) {
				this.blessingorderList = []
				this.status = type
				this.total = null
				this.paging.page = 1
				this.getBlessingorderList()
			},
			payOrder(id) {
				pay(id, 1)
			},
			cancelOrder(order_id) {
				this.$api.blessingordercancel({
					order_id
				}).then(res => {
					this.blessingorderList = []
					this.total = null
					this.paging.page = 1
					this.getBlessingorderList()
				})
			},
			delOrder(order_id) {
				this.$api.blessingorderdel({
					order_id
				}).then(res => {
					this.blessingorderList = []
					this.total = null
					this.paging.page = 1
					this.getBlessingorderList()
				})
			},
			buyAgain(obj) {
				this.$api.blessingordercreate({
					order_type: 1,
					type: obj.type,
					price: obj.price,
					category: obj.category,
					wish_name: obj.wish_name,
					lamp_time: obj.lamp_time,
					name: obj.name,
					is_anonymity: obj.is_anonymity,
					mobile: obj.mobile,
					sex: obj.sex,
					birthdate: obj.birthdate,
					address: obj.address,
					lotus_lamp_ids: obj.lotus_lamp_ids,
					temple_id: obj.temple_id,
					remark: obj.remark
				}).then(res => {
					pay(res.data.id, 1)
				})
			},
			updata() {
				this.paging.page = 1
				this.blessingorderList = []
				this.total = null
				this.getBlessingorderList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		z-index: -1;
	}

	.box {
		box-sizing: border-box;
		padding: 0 30rpx;
		padding-top: 20rpx;
	}

	.orderstatus {
		height: 160rpx;
		background: #FEF1DC;
		border-radius: 20rpx;
		padding: 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.item {
		.status-img {
			display: flex;
			justify-content: center;
		}

		.status-text {
			padding-top: 14rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #111111;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.orderslist {
		height: calc(100vh - 210rpx);
		padding-top: 16rpx;

		.ordersitem {
			padding: 30rpx;
			box-sizing: border-box;
			height: 400rpx;
			background: #FEF1DC;
			border-radius: 20rpx;
			margin-bottom: 16rpx;

			.top {
				display: flex;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #d3d3d3;

				.left {
					width: 108rpx;
					height: 212rpx;
					// background-color: lawngreen;
				}

				.right {
					padding-left: 30rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						display: flex;
						justify-content: space-between;
						background-color: #FEF1DC;

						.pary {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #111111;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}

						.type {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 24rpx;
							color: #D06122;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
						}
					}

					.lamp {
						padding-top: 10rpx;
						flex: 1;

						.lamps {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #AAAAAA;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
						}

						.num {
							padding-top: 10rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #AAAAAA;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
						}
					}

					.number {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #111111;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				padding-top: 30rpx;

				.total {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #111111;
					line-height: 60rpx;
					text-align: left;
					font-style: normal;
				}

				.btn {
					.btn1 {
						display: flex;

						.left {
							width: 140rpx;
							height: 60rpx;
							border-radius: 42rpx;
							border: 2rpx solid #EA6F29;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #D06122;
							line-height: 60rpx;
							text-align: center;
							font-style: normal;
							margin-right: 20rpx;
						}

						.right {
							width: 140rpx;
							height: 60rpx;
							background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
							border-radius: 42rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 60rpx;
							text-align: center;
							font-style: normal;
						}
					}
				}
			}
		}
	}

	.nodata {
		width: 100%;
		height: 100%;
		background: #FEF1DC;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #AAAAAA;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
	}
</style>